<template>
  <div class="tabs">
    <div style="display:flex;justify-content: space-around;flex-direction: row;margin: 0px 36px;padding-left: 12px;">
      <div
        v-for="(item, idx) in types" :key="item.value" class="tab"
        :class="{active: idx == current}"
        @click="handleClickTap(idx)"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- 需求列表 -->
    <div v-if="loading" class="loading">
      <van-loading vertical>
        加载中...
      </van-loading>
    </div>
    <template v-else>
      <div v-if="list.length" class="news-list">
        <demand-list ref="demandList" :num="num" :demand-list="list" style="height:100px;" :current="current" :project-id="projectId" :staff-title="'项目管理'" @getChildDialog="getChildDialog" />
      </div>
      <van-empty v-else description="暂无数据" />
    </template>
  </div>
</template>
<script>
import demandList from './component/demand-list.vue'
import { getProjectRequire } from '@/apis/project'

export default {
  components: { demandList },
  props: {
    infoData: {
      type: Object,
    },
  },
  data() {
    return {
      current: 0,
      pageNo: 1,
      pageSize: 10,
      loading: true,
      requirementStatus: '',
      list: [],
      status: 'more',
      finished: false,
      types: [
        { value: 0, label: '全部' },
        { value: 1, label: '未开始' },
        { value: 2, label: '进行中' },
        { value: 3, label: '已关闭' },
      ],
    }
  },
  mounted() {
    this.handleClickTap(0)
  },
  methods: {
    getChildDialog(id) {
      const num = id
      this.$emit('getDelDialog', num)
    },
    handleClickTap(idx) {
      this.pageNo = 1
      this.current = idx
      this.finished = false
      this.getProjectRequire()
    },
    async getProjectRequire() {
      uni.showLoading({
        title: '查询中',
      })
      if (this.current === 0) {
        this.requirementStatus = ''
      } else if (this.current === 1) {
        this.requirementStatus = 'wait'
      } else if (this.current === 2) {
        this.requirementStatus = 'doing'
      } else if (this.current === 3) {
        this.requirementStatus = 'closed'
      }
      if (this.pageNo > 1) {
        this.status = 'loading'
      }
      const params = { pageNo: this.pageNo, pageSize: this.pageSize, projectId: this.infoData.id, requirementStatus: this.requirementStatus }
      const res = await getProjectRequire(params)
      const { total, records } = res
      if (this.pageNo === 1) {
        this.list = records
      } else {
        this.list = [...this.list, ...records]
      }
      this.loading = false
      this.status = this.list.length >= total ? 'noMore' : 'more'
      uni.hideLoading()
    },
    loadMore() {
      if (['noMore', 'loading'].includes(this.status)) {
        return
      }
      this.pageNo += 1
      this.getProjectRequire()
    },
    // async loadNews() {
    //   console.log(this.current, 'this.current')
    //   if (this.current === 0) {
    //     this.requireList = [{ title: '桥遂板块需要改动备份全部', yxj: '3', plan: '无', hour: '54', name: '张三', cs: '测试完毕', assign: '李四' },
    //       { title: '桥遂板块需要改动备份二', yxj: '3', plan: '无', hour: '54', name: '张三', cs: '测试完毕', assign: '李四' },
    //       { title: '桥遂板块需要改动备份三', yxj: '3', plan: '无', hour: '54', name: '张三', cs: '测试完毕', assign: '李四' }]
    //   } else if (this.current === 1) {
    //     this.requireList = [{ title: '桥遂板块需要改动备份未关闭', yxj: '3', plan: '无', hour: '54', name: '张三', cs: '测试完毕', assign: '李四' }]
    //   } else if (this.current === 2) {
    //     this.requireList = [{ title: '桥遂板块需要改动备份评审中', yxj: '3', plan: '无', hour: '54', name: '张三', cs: '测试完毕', assign: '李四' }]
    //   } else {
    //     this.requireList = [{ title: '桥遂板块需要改动备份已关闭', yxj: '3', plan: '无', hour: '54', name: '张三', cs: '测试完毕', assign: '李四' }]
    //   }
    //   try {
    //     // if (this.pageNo === 1) {
    //     //     this.loading = true
    //     // } else {
    //     //     this.status = 'loading'
    //     // }
    //     // await sleep(300)
    //     // const res = await getNewsList({
    //     // pageNo: this.pageNo,
    //     // typeId: this.types[this.current].value,
    //     // })
    //     // const { list, total } = res.data

    //     // if (this.pageNo === 1) {
    //     //     this.newsList = list;
    //     // } else {
    //     //     this.newsList = [...this.newsList, ...list]
    //     // }

    //     // if (this.newsList.length >= total) {
    //     //     this.finished = true
    //     //     this.status = 'noMore'
    //     // }
    //     this.newsList = [
    //       { id: Math.random(), text: '请假', img: '../../../../static/office/off0.png' },
    //       { id: Math.random(), text: '调休', img: '../../../../static/office/off1.png' },
    //       { id: Math.random(), text: '加班', img: '../../../../static/office/off2.png' },
    //       { id: Math.random(), text: '外出', img: '../../../../static/office/off3.png' },
    //       { id: Math.random(), text: '出差', img: '../../../../static/office/off4.png' },
    //       { id: Math.random(), text: '换班', img: '../../../../static/office/off5.png' },
    //       { id: Math.random(), text: '补卡', img: '../../../../static/office/off6.png' },
    //     ]
    //   } catch (e) {} finally {
    //     this.loading = false
    //   }
    // },
    // loadMore() {
    //   if (this.finished) {
    //     return
    //   }
    //   this.pageNo++
    //   this.loadNews()
    // },
  },

}
</script>
  <style lang="scss" scoped>
 .tabs {
    // display: flex;
    // align-items: center;
    padding-top: 10px;
    column-gap: 20px;

    .tab {
        margin-bottom: 10px;
        position: relative;
        transition: all 250ms;
        background: #f4f4f4;
        color: #999;
        border-radius: 2px;
        width: 61px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        margin-right:10px;

       &::after {
        content: '';
        display: block;
        position: absolute;
        width: 0px;
        height: 2px;
        left: 50%;
        bottom: -7px;
        transform: translateX(-50%);
        background: #fff;
        border-radius: 1px;
        transition: all 250ms;
      }

      &.active {
        font-weight: 500;
        background:#739ECA;
        color:#fff;
        &::after {
          width: 16px;
        }
      }
    }
  }

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
  </style>
  <style lang="scss">

  </style>
